<template>
  <div>
    <el-dialog append-to-body :close-on-click-modal="false" :before-close="hideDialog" :model-value="editDialogShow" :title="title" :width="width">
      <slot name="content"/>
      <template #footer v-if="showFooter">
        <div class="dialog-footer">
          <el-button type="primary" @click="hideDialog()" link>取消</el-button>
          <el-button :loading="saveLoading" type="primary" @click="toSave()">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script setup>
import  {computed,getCurrentInstance} from 'vue'

const { proxy } = getCurrentInstance();

const props=defineProps({

  saveLoading:{
     default: false
  },
  dialogShow: {
    required: true,
    type: Boolean
  },
  title: {

  },
  width:{
    default: "600px"
  },
  showFooter:{
    default: true
  }
})

const emit = defineEmits();
const editDialogShow=computed({
  get() {
    return props.dialogShow
  },
  set(val) {
    emit('update:dialogShow', val)
  }
})
function  hideDialog(){
   editDialogShow.value = false
}

function toSave(){
  emit('save')
}

</script>
